<template>
  <div class="custom-upload">
    <label class="upload-label flex-center" for="uploadFile">
      <slot name="labelSlot"></slot>
    </label>
    <input
      class="file-upload"
      type="file"
      id="uploadFile"
      :multiple="uploadConfig.multiple"
      @change="handleUpload"
    />
  </div>
</template>

<script setup>
const props = defineProps({
  uploadConfig: {
    type: Object,
    default: () => ({}),
  },
});

const emits = defineEmits(["handleUpload"]);
function handleUpload(e) {
  emits("handleUpload", e.target.files);
}
</script>

<style scoped lang="less">
.custom-upload {
  .upload-label {
    color: #333;
    border: 1px dashed #999;
    width: 120px;
    height: 120px;
    font-size: 36px;

    &:hover {
      cursor: pointer;
      opacity: 0.7;
    }
  }

  .file-upload {
    font-size: 0; // 隐藏按钮的文字
    height: 24px;
    width: 100%;
    display: none;

    &::file-selector-button {
      height: 24px;
      font-size: 14px;
      color: #333;
      text-align: left;
      font-size: 14px;
      background-color: #fff;
      border: none;
      width: 100%;
    }
  }
}
</style>
